%input {
  @apply
  h-12
  mt-3
  block
  w-full
  rounded-md
  py-1.5
  px-1.5
  outline
  outline-1
  outline-transparent
  ring-4
  ring-transparent
  ring-opacity-0
  transition-all
  duration-300
  text-myTheme-light
  bg-myTheme-primary
  caret-myTheme-accent
  placeholder:text-gray-400
  placeholder:mx-2;
}

%input-focus {
  @apply
  -outline-offset-0
  outline-myTheme-accent
  ring-myTheme-accent
  ring-opacity-75;
}

%input__invalid {
  @apply
  outline-offset-0
  outline-red-700;

  &:focus {
    @apply
    ring-red-700
    ring-opacity-75;
  }
}
